<template>
  <div>
    <el-button type="primary" @click="startTest">开始导图测试</el-button>
    <div class="console-output">
      <pre id="console"></pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

import { ElMessage } from "element-plus";
defineOptions({
  name: "AOIDat"
});

const output = ref("");

// const API_URL_AOIDat = "https://localhost:44389/api/AOIDat/runExe";
const API_URL_AOIDat = "http://10.20.5.21:8080/api/AOIDat/runExe";

async function startTest() {
  try {
    const response = await fetch(API_URL_AOIDat);
    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8");

    let output = "";
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      output += decoder.decode(value, { stream: true });
      document.getElementById("console").textContent = output;
    }
  } catch (error) {
    ElMessage.error("未请求到接口");
  }
}
</script>

<style scoped>
.console-output {
  margin-top: 20px;
  background-color: #000;
  color: #0f0;
  font-family: monospace;
  padding: 10px;
  height: 80vh;
  overflow-y: scroll;
  border: 1px solid #333;
}
</style>
